<template>
  <view class="map-content">
    <map
      id="map"
      :longitude="getLocation.longitude"
      :latitude="getLocation.latitude"
      :scale="16"
      :show-location="true"
      :markers="markers"
      style="width: 100%; height: 300px"
      @markertap="markertap"
      @regionchange="regionchange"
    >
    </map>
    <!-- @tap="clickFun" -->
    <view
      class="map-obj"
      @click="clickFun"
      v-if="storeObj && storeObj.storeName"
    >
      <view class="m-left">
        <u--image
          :src="wxImg + storeObj.photo"
          width="70px"
          height="70px"
          class="tab-img"
          v-if="storeObj.photo"
        ></u--image>
        <u--image
          :src="avatar1"
          width="70px"
          height="70px"
          class="tab-img"
          v-else-if="storeObj.type === 1"
        ></u--image>
        <u--image
          :src="avatar"
          width="70px"
          height="70px"
          class="tab-img"
          v-else
        ></u--image>
      </view>
      <view class="m-right">
        <text class="m-top1">{{ storeObj.storeName }}</text>
        <!-- <view class="m-top2" v-if="flag"
          ><u-icon name="map"></u-icon>{{ storeObj.merchantAddress }}</view
        > -->
        <view class="m-top2"
          ><u-icon name="map" size="16"></u-icon
          >{{ storeObj.type === 1 ? "商家" : "" }}距离您{{
            formatDistance(storeObj.distance)
          }}内</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import {
  getStoreData,
  setStoreData,
  httpPost,
  httpGet,
  formatDistance,
  bdMapToTxMap,
  txMapToBdMap,
} from "@/utils/http.js";
const avatar = require(`@/img/my/avatar1.jpg`);
const avatar1 = require(`@/img/my/my2.png`);
const app = getApp();
const globalData = app.globalData;
const wxImg = globalData.wxImg;
export default {
  data() {
    return {
      title: "地图功能开发中，敬请期待",
      getLocation: {
        latitude: 22.54286,
        longitude: 114.05956,
      },
      markers: [],
      avatar,
      avatar1,
      storeObj: {},
      wxImg,
      formatDistance,
      flag: false,
    };
  },
  onShow() {
    const _this = this;
    wx.getLocation({
      isHighAccuracy: true, // 开启地图精准定位
      type: "gcj02", // 地图类型写这个
      // type: "wgs84", //gcj02
      success(res) {
        console.log("resMap:", res);
        const latitude = res.latitude;
        const longitude = res.longitude;
        _this.getLocation.latitude = latitude;
        _this.getLocation.longitude = longitude;
        _this.getData();
      },
      fail: (err) => {
        // 获取定位失败
        _this.getData();
      },
    });
  },
  methods: {
    regionchange(e) {
      if (
        e &&
        e.type === "end" &&
        e.target &&
        e.target.centerLocation &&
        e.target.centerLocation.latitude
      ) {
        const latitude = e.target.centerLocation.latitude;
        const longitude = e.target.centerLocation.longitude;
        this.getData(latitude, longitude);
      }
    },
    markertap(e) {
      const id = e.detail.markerId;
      const _this = this;
      this.markers.forEach((i) => {
        if (i.id === id) {
          _this.storeObj = i;
          i.iconPath =
            i.type === 1 ? "/static/store1.png" : "/static/person1.png";
        } else {
          i.iconPath =
            i.type === 1 ? "/static/store.png" : "/static/person.png";
        }
      });
    },
    getData(latitude, longitude) {
      const _this = this;
      let params = {};
      let newParams = txMapToBdMap(
        this.getLocation.longitude,
        this.getLocation.latitude
      );
      if (latitude && longitude) {
        this.flag = true;
        let newParams2 = txMapToBdMap(longitude, latitude);
        params = {
          ...newParams2,
          userLatitude: newParams.latitude,
          userLongitude: newParams.longitude,
        };
      } else {
        params = newParams;
        this.flag = false;
      }
      setStoreData("getLocation", _this.getLocation);
      httpPost("/api/user/location/nearByLocationList", {
        ...params,
        pageNo: 1,
        pageSize: 100,
      })
        .then((res) => {
          const result = res.data;
          _this.markers =
            result &&
            result.list.map((i, k) => {
              let obj = bdMapToTxMap(i.longitude, i.latitude);
              let storeName = i.name;
              delete i.name;
              let iconPath =
                i.type === 1 ? "/static/store.png" : "/static/person.png";
              if (k === 0) {
                _this.storeObj = {
                  ...i,
                  storeName,
                  iconPath:
                    i.type === 1 ? "/static/store1.png" : "/static/person1.png",
                  width: "30",
                  height: "30",
                  ...obj,
                };
                return _this.storeObj;
              } else {
                return {
                  ...i,
                  storeName,
                  iconPath,
                  width: "30",
                  height: "30",
                  ...obj,
                };
              }
            });
        })
        .catch((e) => {
          _this.storeObj = {};
          _this.markers = [];
        });
    },
    clickFun() {
      uni.openLocation({
        latitude: Number(this.storeObj.latitude),
        longitude: Number(this.storeObj.longitude),
        scale: 15,
        name: this.storeObj.storeName,
        address: this.storeObj.merchantAddress,
      });
    },
  },
};
</script>

<style lang="scss">
.map-content {
  display: flex;
  position: relative;
  #map {
    width: 100vw;
    min-height: 100vh;
  }
  .map-obj {
    width: calc(100vw - 32px);
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 16px;
    bottom: 24px;
    display: flex;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    font-size: 14px;
    .m-left {
      width: 70px;
      min-width: 70px;
      height: 70px;
      border-radius: 70px;
      margin-right: 16px;
      overflow: hidden;
    }
    .m-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .m-top1 {
      color: #000;
      margin-bottom: 10px;
    }
    .m-top2 {
      color: #666;
      font-size: 13px;
      display: flex;
      align-items: flex-start;
      /deep/.u-icon__icon {
        margin: 2px 6px 0 0;
      }
    }
  }
}
</style>
